Day5【主題一：Flexbox】＿彈性項目相關屬性/flex屬性/flex-grow屬性/flex-shrink屬性/flex-basis屬性/flex縮寫/order屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 5

0

自我挑戰組

CSS 大全（第四版）閱讀筆記系列第 5 篇

Day5【主題一：Flexbox】＿彈性項目相關屬性/flex屬性/flex-grow屬性/flex-shrink屬性/flex-basis屬性/flex縮寫/order屬性

11th鐵人賽 flex css 布局切版

2019-09-06 23:16:27

1840 瀏覽

分享至

彈性項目相關屬性

儘管彈性項目的對齊、順序與彈性是透過彈性容器屬性協調運作，仍可透過幾個能夠作用在個別彈性項目的屬性做更細緻的操作。
flex縮寫屬性及其他個別的flex-grow、flex-shrink、flex-basis等屬性能夠控制彈性項目的彈性。
彈性指彈性項目在主軸上能夠擴展或壓縮的量。

flex屬性

flex-grow、flex-shrink、flex-basis等屬性的縮寫屬性。
組成包含成長系數、壓縮性數、彈性基準。
width:50% ; flex:0 0 200px ;　，指彈性項目在主軸上恰好是200px
假設主軸是水平，就會忽略width值50％；
假設主軸是垂直，就會忽略height值50％；
要是選擇器的標的不是彈性項目，套用flex屬性就不會有任何效果。

flex-grow屬性

flex-grow屬性定義了在空間足夠時，能否允許彈性項目擴展，以及與其他同儕彈性元素的擴展比例。
flex-grow值一定是一個正數，不允許負值，要是大於等於零的數字（可以是小數）
flex屬性設定的三個數值，第一個非空正數值代表成長系數(flex-grow)，flex省略了成長與壓縮系數時，成長系數值會預設為1，但要是flex與flex-grow都沒有宣告，那麼成長系數的預設值就會是0。
當flex屬性宣告明確的將flex-basis設定為0%或是使用預設值的0%且彈性項目的成長系數為0時，不允許成長的彈性項目在主軸上的長度會縮小到其內容允許的最小值以下。
（最小長度是最寬的連續字元的寬）
只用flex-grow宣告，flex-basis預設為auto，額外空間會依比例分配；使用flex宣告一個值，彈性項目會在所有空間依比例成長，而不是只有剩餘空間。

flex-shrink屬性

flex-shrink屬性定義了在沒有足夠空間時，彈性項目相對於其他同儕彈性相同的縮小比例。
若flex屬性省略了flex-shrink數值，或是同時省略flex與flex-shrink屬性時，縮小系數預設為1。
flex-shrink值一定是一個正數，不允許負值，要是大於等於零的數字（可以是小數）
注意！某些情況下，如果彈性項目的內容無法折行或在主軸方向縮小，彈性項目就不會進一步的縮小。（例如：內含固定寬圖片，p627）
縮小百分比＝負值空間／((寬1縮小係數1)＋...＋寬N縮小係數N)
縮小係數為零時，如果彈性項目的寬與縮小基準（flex basis）都設為auto，內容就不會折行。（p630）
任何正值的縮小係數值都會讓內容折行，由於縮小與縮小係數成比例，要是所有的彈性項目都有相似的縮小係數，內容就應該折行產生出類似數量的行數。（p630）

flex-basis屬性

flex-basis屬性定義了彈性項目在分配額外或負值空間前的初始值或預設值。
通用的initial關鍵字會將彈性基準重設為初始值auto。
宣告auto時會計算為width或height，要是width或height設置為auto，那麼flex-basis就會計算為content。
＊content關鍵字
優先性：min-width＞max-width＞flex＞width
百分比單位：flex-basis的百分比值是以彈性容器的主維度為基準計算。
如果flex-basis屬性與flex屬性都沒有設定，彈性基準預設就會是auto。
如果設置flex屬性，但省略縮寫中的flex-basis部分，基準會是0。
當基準值為0的情況下，彈性容器的尺寸會依據每個彈性項目的成長系數比例分配到各個彈性項目。當預設為auto時，只有額外空間會依比例分配。

flex縮寫
15-1常見的flex值

flex：initial = flex：nill 1 auto，只允許縮小
flex：auto = flex：1 1 auto，
讓彈性項目吸收主軸上的自由空間（雙向彈性）
flex：none = flex：0 0 auto，防止彈性
flex：number = flex：number 0 0，只允許放大

order屬性

order屬性能夠改變單個彈性項目的順序，指定彈性項目所屬的序位組（ordinal group）。
預設值為0，並沿著主軸方向顯示。
允許負值。
負值項目會出現在預設值0之前，正值項目會出現在0之後。
螢幕報讀軟體與tab順序仍然會維持HTML原始碼的順序。

Day4【主題一：Flexbox】＿對齊項目/align-self屬性/align-content/彈性項目

Day6【主題一：Flexbox】＿統整

系列文

CSS 大全（第四版）閱讀筆記共 30 篇

目錄

RSS系列文訂閱系列文

17 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 則留言

0

CSScoke

iT邦新手 3 級 ‧ 2019-09-10 00:38:40

** 提醒錯字 **

設主軸是水平，就會忽略「widrh」值50％；
width

任何正值的縮小「細數」值都會讓內容折行
係數

彈性項目「再」分配額外「獲」負值空間前的
在/或

當基準值為0的情況下，彈性容器的尺寸「輝」依據每個彈性項目的成長系數比例分配到各個彈性項目。「單」預設為auto時，只有額外空間會依比例分配。
會/當

回應
檢舉

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22081 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙